<template>
    <div class="sjzxContent">
        <!-- 专题图图例 -->
        <FxffLegend v-show="$store.state.fxffLegendShow" />

        <!-- 左侧面板   -->
        <div
            :class="{
                fxfkLeft: true,
                animate__faster: true,
                animate__animated: true,
                animate__fadeInLeft: leftPanelShow,
                animate__fadeOutLeft: !leftPanelShow,
            }"
        >
            <Left />
        </div>
        <!-- 右侧面板 -->
        <div
            :class="{
                sjzxRight: true,
                animate__faster: true,
                animate__animated: true,
                animate__fadeInRight: $store.state.fxfkRightShow,
                animate__fadeOutRight: !$store.state.fxfkRightShow,
            }"
        >
            <Right v-if="$store.state.fxfkRightShow" />
        </div>
        <Viewer />
        <div class="InfoBoxContent">
            <!-- 水库，漫水桥，危房，旅游景区景点，易淹易涝点(区)，渔港，塔吊 -->
            <div class="infoBox-class-1" id="infoBox1">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <p class="title" v-if="$store.state.infoBoxContent">
                    <!-- 水库 -->
                    {{
                        $store.state.infoBoxContent["水库工程名称"]
                            ? $store.state.infoBoxContent["水库工程名称"]
                            : ""
                    }}
                    <!-- 漫水桥 -->
                    {{
                        $store.state.infoBoxContent["漫水桥(路)类型"]
                            ? $store.state.infoBoxContent["漫水桥(路)类型"]
                            : ""
                    }}
                    <!-- 危房 -->
                    {{
                        $store.state.infoBoxContent["危房户主姓名"]
                            ? $store.state.infoBoxContent["危房户主姓名"]
                            : ""
                    }}
                    <!-- 旅游景区景点 -->
                    {{
                        $store.state.infoBoxContent["景区景点名称"]
                            ? $store.state.infoBoxContent["景区景点名称"]
                            : ""
                    }}
                    <!-- 易淹易涝点(区) -->
                    {{
                        $store.state.infoBoxContent["易淹易涝点(区)类型"]
                            ? $store.state.infoBoxContent["易淹易涝点(区)类型"]
                            : ""
                    }}
                    <!-- 渔港 -->
                    {{
                        $store.state.infoBoxContent["渔港名称"]
                            ? $store.state.infoBoxContent["渔港名称"]
                            : ""
                    }}
                    <!-- 塔吊 -->
                    {{
                        $store.state.infoBoxContent["塔吊具体地址"]
                            ? $store.state.infoBoxContent["塔吊具体地址"]
                            : ""
                    }}
                    <!-- 火情POI详情 -->
                    {{
                        $store.state.infoBoxContent["poiNAME"]
                            ? $store.state.infoBoxContent["poiNAME"]
                            : ""
                    }}
                    {{
                        $store.state.infoBoxContent["责任人姓名"]
                            ? $store.state.infoBoxContent["责任人姓名"]
                            : ""
                    }}
                    <!-- 非煤矿山安全生产 -->
                    {{
                        $store.state.infoBoxContent["矿山名称"]
                            ? $store.state.infoBoxContent["矿山名称"]
                            : ""
                    }}
                    <!-- 企业信息 -->
                    {{
                        $store.state.infoBoxContent["企业名称"]
                            ? $store.state.infoBoxContent["企业名称"]
                            : ""
                    }}
                    <!-- 重大危险源信息 -->
                    {{
                        $store.state.infoBoxContent["地址"]
                            ? $store.state.infoBoxContent["地址"]
                            : ""
                    }}
                </p> 
                <div class="PoiInfoBox">
                    <div
                        class="PoiInfoItem"
                        v-for="(value, key, index) in $store.state
                            .infoBoxContent"
                        :key="index"
                    >
                        <p>{{ key }}&nbsp;:</p>
                        <div
                            :style="{
                                background: 'rgba(19,62,76,0.5)',
                                color: '#fff',
                            }"
                            :title="value"
                        >
                            {{ value == "null" ? "暂无" : value }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 九类防汛防风数据 -->
            <div class="infoBox-class-1" id="infoBox0">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header">
                    <div class="info-box-header-title">
                        <span> 详细信息 </span>
                    </div>
                </div>
                <!-- //baseInfo check implement -->
                <!-- 隐患基本情况
                市县落实情况
                省级行业主管部门核查情况 -->
                <div class="PoiInfoBox">
                    <el-tabs v-model="activeName" @tab-click="handleTabClick">
                        <el-tab-pane label="隐患基本情况" name="first">
                            <div class="resource-form-table-box">
                                <div
                                    class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                        .infoBoxThreeContent['隐患基本情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{
                                            value == "null" ? "暂无" : value
                                        }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="市县落实情况" name="second">
                            <div class="resource-form-table-box">
                                <div
                                    class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                        .infoBoxThreeContent['市县落实情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{
                                            value == "null" ? "暂无" : value
                                        }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane
                            label="省级行业主管部门核查情况"
                            name="third"
                        >
                            <div class="resource-form-table-box">
                                <div
                                    class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                        .infoBoxThreeContent[
                                        '省级行业主管部门核查情况'
                                    ]"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{
                                            value == "null" ? "暂无" : value
                                        }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 渔船台账数据 -->
            <div class="infoBox-class-1" id="infoBox2">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <p class="title">
                    {{
                        $store.state.ycList.length > 0
                            ? $store.state.ycList.length
                            : ""
                    }}艘渔船
                </p>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <div class="PoiInfoBox">
                    <el-descriptions
                        v-for="(item, index) in $store.state.ycList"
                        :key="index"
                        class="margin-top"
                        :column="3"
                        direction="vertical"
                        border
                    >
                        <el-descriptions-item label="渔船名称">{{
                            item.name
                        }}</el-descriptions-item>
                        <el-descriptions-item label="负责人">{{
                            item.charge
                        }}</el-descriptions-item>
                        <el-descriptions-item label="负责人电话">{{
                            item.phone
                        }}</el-descriptions-item>
                        <el-descriptions-item label="地址">{{
                            item.address
                        }}</el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <div class="infoBox-class-1" id="infoBox3">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <p class="title">突发事件</p>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <!-- {{ value == "null" ? "暂无" : value }} -->
                <div class="PoiInfoBox">
                    <div
                        class="PoiInfoItem"
                        v-for="(value, key, index) in $store.state
                            .infoBoxContent"
                        :key="index"
                    >
                        <p>{{ key }}&nbsp;:</p>
                        <div
                            :style="{
                                background: 'rgba(19,62,76,0.5)',
                                color: '#fff',
                            }"
                            :title="value"
                            v-html="value"
                        ></div>
                    </div>
                    <div class="exportEvent">
                        <div @click="zhuanbao">专报查看</div>
                        <div @click="zhuanbaoDownload">专报下载</div>
                        <div @click="jianbaoDownload">简报下载</div>
                    </div>
                </div>
            </div>
            <!-- 地质灾害隐患点详情 -->
            <div class="infoBox-class-1" id="infoBox4">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div
                    class="info-box-header"
                    v-if="$store.state.infoBoxThreeContent"
                >
                    <span>
                        {{
                            $store.state.infoBoxThreeContent["隐患基本情况"][
                                "地质灾害隐患点编号或具体地点"
                            ]
                        }}
                    </span>

                    <span
                        class="el-icon-camera-solid"
                        style="cursor: pointer; padding-left: 10px"
                        v-if="
                            $store.state.infoBoxThreeContent['隐患基本情况'][
                                '全景图文件名'
                            ]
                        "
                        title="查看全景图"
                        @click="
                            quanjing(
                                $store.state.infoBoxThreeContent[
                                    '隐患基本情况'
                                ]['全景图文件名']
                            )
                        "
                    >
                    </span>
                </div>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <div class="PoiInfoBox">
                    <el-tabs v-model="activeName" @tab-click="handleTabClick">
                        <el-tab-pane label="隐患基本情况" name="first">
                            <div class="resource-form-table-box">
                                <div
                                    class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                        .infoBoxThreeContent['隐患基本情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{
                                            value == "null" ? "暂无" : value
                                        }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="市县落实情况" name="second">
                            <div class="resource-form-table-box">
                                <div
                                    class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                        .infoBoxThreeContent['市县落实情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{
                                            value == "null" ? "暂无" : value
                                        }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane
                            label="省级行业主管部门核查情况"
                            name="third"
                        >
                            <div class="resource-form-table-box">
                                <div
                                    class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                        .infoBoxThreeContent[
                                        '省级行业主管部门核查情况'
                                    ]"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{
                                            value == "null" ? "暂无" : value
                                        }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 责任人详细信息 -->
            <div class="infoBox-class-1" id="infoBox5">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header">三防责任人</div>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <!-- {{ value == "null" ? "暂无" : value }} -->
                <div class="PoiInfoBox" v-if='$store.state.infoBoxContent'>
                    <el-tabs v-model="eventActiveName" @tab-click="handleClick">
                        <el-tab-pane label="责任人基本情况" name="firstEvent">
                            <div class="resource-form-table-box">
                                <template  v-for="(value, key, index) in $store.state.infoBoxContent"
                                    :key="index">
                                    <div class="item-box el-row"
                                    v-if="key!='职责'"
                                    >
                                        <div class="label-box el-col el-col-10">
                                            {{ key }}
                                        </div>
                                        <div class="value-box el-col el-col-14">
                                            :&nbsp;{{ value == "null" ? "暂无" : value }}
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="职责" name="secondEvent">
                            <div class="resource-form-table-box">
                                <template  v-for="(value, key, index) in $store.state.infoBoxContent"
                                    :key="index">
                                    <div class=""
                                    v-if="key=='职责'"
                                    >
                                        <div style="line-height:25px;" v-html="$store.state.infoBoxContent['职责']">

                                        </div>
                                    </div>
                                </template>
                            </div>
                        </el-tab-pane>
                    </el-tabs>   
                    <div class="exportEvent">
                        <!-- <div @click="zhuanbao">专报查看</div>
                        <div @click="zhuanbaoDownload">专报下载</div> -->
                        <!-- <div @click="yingxiangfenxi">影响分析</div> -->
                    </div>
                </div>
                <!-- <p class="title" v-if="$store.state.infoBoxContent">
                    {{
                        $store.state.infoBoxContent["责任人姓名"]
                            ? $store.state.infoBoxContent["责任人姓名"]
                            : ""
                    }} 
                </p>
                <div class="PoiInfoBox">
                    <div
                        class="PoiInfoItem"
                        v-for="(value, key, index) in $store.state
                            .infoBoxContent"
                        :key="index"
                    >
                        <p>{{ key }}&nbsp;:</p>
                        <div
                            v-if="key != '职责'"
                            :style="{
                                background: 'rgba(19,62,76,0.5)',
                                color: '#fff',
                            }"
                            :title="value"
                        >
                            {{ value == "null" ? "暂无" : value }}
                        </div>
                        <div class="zhiwu" v-if="key == '职责'">
                            <div v-for="item in value" :key="item">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
            <!-- 实时渔船 -->
            <div class="infoBox-class-1" id="infoBox6">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header" v-if="$store.state.realtimeYC">
                    {{
                        $store.state.realtimeYC["渔船名称"]
                            ? $store.state.realtimeYC["渔船名称"]
                            : ""
                    }}
                </div>
                <div class="PoiInfoBox">
                    <div class="resource-form-table-box">
                        <div
                            class="item-box el-row"
                            v-for="(value, key, index) in $store.state
                                .realtimeYC"
                            :key="index"
                        >
                            <div class="label-box el-col el-col-10">
                                {{ key }}
                            </div>
                            <div
                                class="value-box el-col el-col-14"
                                v-if="key != '职责'"
                            >
                                :&nbsp;{{ value == "null" ? "暂无" : value }}
                            </div>
                            <div
                                class="value-box el-col el-col-14"
                                v-if="key == '职责'"
                            >
                                :&nbsp;{{ value == "null" ? "暂无" : value }}
                            </div>
                        </div>
                    </div>
                    <!-- <div
                        class="PoiInfoItem"
                        v-for="(value, key, index) in $store.state.realtimeYC"
                        :key="index"
                    >
                        <p>{{ key }}&nbsp;:</p>
                        <div
                            v-if="key != '职责'"
                            :style="{
                                background: 'rgba(19,62,76,0.5)',
                                color: '#fff',
                            }"
                            :title="value"
                        >
                            {{ value == "null" ? "暂无" : value }}
                        </div>
                        <div class="zhiwu" v-if="key == '职责'">
                            <div v-for="item in value" :key="item">
                                {{ item }}
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
            <!-- 在建工地 -->
            <div class="infoBox-class-1" id="infoBox7">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <p class="title" v-if="$store.state.constructGD">
                    {{
                        $store.state.constructGD["项目地址"]
                            ? $store.state.constructGD["项目地址"]
                            : ""
                    }}
                </p>
                <div class="PoiInfoBox">
                    <div class="PoiInfoItem">
                        <div>
                            <p>项目地址&nbsp;:</p>
                            <div
                                style="background: rgba(19,62,76,0.5),color: #fff"
                            >
                                {{ $store.state.constructGD["项目地址"] }}
                            </div>
                        </div>
                        <div>
                            <p>施工单位&nbsp;:</p>
                            <div
                                style="background: rgba(19,62,76,0.5),color: #fff"
                            >
                                {{ $store.state.constructGD["施工单位"] }}
                            </div>
                        </div>
                        <div>
                            <p>设备总数&nbsp;:</p>
                            <div
                                style="background: rgba(19,62,76,0.5),color: #fff"
                            >
                                <span
                                    >设备总数{{
                                        $store.state.constructGD["塔式起重机"] +
                                        $store.state.constructGD["施工升降机"]
                                    }}</span
                                >
                                （<span
                                    @click="
                                        handleGetTableData(
                                            1,
                                            $store.state.constructGD.unitId
                                        )
                                    "
                                    >塔式起重机{{
                                        $store.state.constructGD["塔式起重机"]
                                    }}台</span
                                >,
                                <span
                                    @click="
                                        handleGetTableData(
                                            2,
                                            $store.state.constructGD.unitId
                                        )
                                    "
                                    >施工升降机{{
                                        $store.state.constructGD["施工升降机"]
                                    }}台</span
                                >）
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 安全生产 -->
            <div class="infoBox-class-1" id="infoBox8">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header" v-if="$store.state.infoBoxContent">
                    详细信息
                </div>
                <div class="PoiInfoBox">
                    <div class="resource-form-table-box">
                        <div
                            class="item-box el-row"
                            v-for="(value, key, index) in $store.state
                                .infoBoxContent"
                            :key="index"
                        >
                            <div class="label-box el-col el-col-10">
                                {{ key }}
                            </div>
                            <div
                                class="value-box el-col el-col-14"
                                v-if="key != '职责'"
                            >
                                :&nbsp;{{ value == "null" ? "暂无" : value }}
                            </div>
                            <div
                                class="value-box el-col el-col-14"
                                v-if="key == '职责'"
                            >
                                :&nbsp;{{ value == "null" ? "暂无" : value }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buildingInfo" id="buildingInfo">
            <h3 class="buildingInfoTitle">
                {{ $store.state.constructGD["项目地址"] }}设备列表
            </h3>
            <i class="close el-icon-close" @click="hiddenInfoBox"></i>
            <div class="tableContainer">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="equipStatus" label="设备状态">
                    </el-table-column>
                    <!-- <el-table-column 
                        prop="monitorSerial"
                        label="楼号"
                       >
                    </el-table-column> -->
                    <el-table-column prop="monitorSerial" label="监控编号">
                    </el-table-column>

                    <el-table-column prop="equipGeneric" label="设备名称">
                    </el-table-column>
                    <el-table-column prop="recordId" label="备案编号">
                    </el-table-column>
                    <el-table-column prop="exwSerial" label="出厂编号">
                    </el-table-column>
                    <el-table-column prop="specification" label="设备型号">
                    </el-table-column>
                    <el-table-column prop="equipVender" label="设备厂家">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="equipVender"
                        label="终端服务商"
                        >
                    </el-table-column> -->
                    <el-table-column prop="corpName" label="产权单位">
                    </el-table-column>
                    <el-table-column prop="corpName" label="项目名称">
                    </el-table-column>
                    <el-table-column prop="city" label="所在市">
                    </el-table-column>
                    <el-table-column prop="county" label="所在区">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="county"
                        label="操作"
                        >
                    </el-table-column> -->
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
// 搜索组件
//
import Viewer from "../sjzx/Viewer";
import FxffLegend from "./left/Legend";
import Left from "./left/Left";
import Right from "./right/Right";
import axios from "axios";
import { ElMessage } from "element-plus";
import {
    defineComponent,
    onMounted,
    ref,
    provide,
    watch,
    onBeforeUnmount,
    reactive,
} from "vue";
import { useStore } from "vuex";
const leftPanelButtonEffect = () => {
    const store = useStore();
    let leftPanelShow = ref(true);
    let leftPanelHide = () => {
        leftPanelShow.value = !leftPanelShow.value;
        store.commit("changeSjzxLegendPosition", leftPanelShow.value);
    };
    return {
        leftPanelShow,
        leftPanelHide,
    };
};
const rightPanelButtonEffect = () => {
    let rightPanelShow = ref(true);
    let rightPanelHide = () => {
        rightPanelShow.value = !rightPanelShow.value;
    };
    return {
        rightPanelShow,
        rightPanelHide,
    };
};
window.entitiesArr = [];
export default defineComponent({
    components: {
        Right,
        Left,
        FxffLegend,
        Viewer,
    },
    setup() {
        let showReport = ref(false);
        let currentEvent = ref(null);
        let activeName = ref("first");
        let eventActiveName = ref('firstEvent')
        let building = reactive({
            // 监控编号
            monitorSerial: "监控编号",
            // 设备状态
            equipStatus: "设备状态",
            // 设备名称
            equipGeneric: "设备名称",
            // 备案编号
            recordId: "备案编号",
            // 出厂编号
            exwSerial: "出厂编号",
            // 设备型号
            specification: "设备型号",
            // 设备厂家
            equipVender: "设备厂家",
            // 产权单位
            corpName: "产权单位",
            // 所在市
            city: "所在市",
            // 所在区
            county: "所在区",
        });
        const { leftPanelShow, leftPanelHide } = leftPanelButtonEffect();
        const { rightPanelShow, rightPanelHide } = rightPanelButtonEffect();
        let store = useStore();
        // let currentComponent = ref(null)
        // currentComponent.value = store.state.currentComponent
        // watch(()=>store.state.currentComponent,(newValue)=>{
        //     currentComponent.vlaue = newValue
        // })
        const hiddenInfoBox = (event) => {
            Object.keys;
            event.currentTarget.parentNode.style.display = "none";
            showReport.value = "无报";
            activeName.value = 'first'
        };
        const handleTabClick = () => {};
        const zhuanbao = () => {
            axios
                .get(`${sjzxUrl}/api/disaster/one?id=${window.eventId}`)
                .then((res) => {
                    currentEvent.value = res.data.data;
                    showReport.value = "专报";
                });

            //store.commit("changeSjzxLeftCurrentComponent", "");
        };
        const zhuanbaoDownload = () => {
            window.open(
                `${sjzxUrl}/api/disaster/download/specialReport?id=${window.eventId}`
            );
        };
        const jianbaoDownload = () => {
            ElMessage.error("正在建设中");
            //window.open(`${sjzxUrl}/api/disaster/download/briefReport?id${window.eventId}`)
        };
        // 显示全景
        const quanjing = (name) => {
            store.commit("changePsvUrl", `/qj/panoramagram/${name}`);
        };
        let tableData = ref([]);
        const handleGetTableData = (num, unitId) => {
            const oneDiv1 = window.document.getElementById("buildingInfo");
            oneDiv1.style.display = "block";
            axios
                .get(
                    `${sjzxUrl}/api/v2/construct/getEquipmentList?type=${num}&unitId=${unitId}`
                )
                .then((res) => {
                    tableData.value = res.data.data;
                });
        };
        onMounted(() => {});
        onBeforeUnmount(() => {
            layerManager.removeAll();
        });
        return {
            leftPanelShow,
            leftPanelHide,
            rightPanelShow,
            rightPanelHide,
            hiddenInfoBox,
            zhuanbao,
            showReport,
            currentEvent,
            zhuanbaoDownload,
            jianbaoDownload,
            quanjing,
            building,
            tableData,
            handleGetTableData,
            activeName,
            handleTabClick,
            eventActiveName
        };
    },
});
</script>
<style lang="stylus">
.PoiInfoBox::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 5px; /* 高宽分别对应横竖滚动条的尺寸 */
    height: 1px;
}

.PoiInfoBox::-webkit-scrollbar-thumb {
    /* 滚动条里面小方块 */
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

.PoiInfoBox::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}

.PoiInfoBox {
    .el-tabs__header {
        width: 100%;
        margin: 0 0 vh(18);
        z-index: 19;

        .el-tabs__nav-wrap {
            height: vh(30);
            line-height: vh(30);
            // min-width: vw1(2000);
            background: rgba(4, 34, 45, 0.37);

            .el-tabs__nav-prev, .el-tabs__nav-next {
                line-height: vh(30);
                color: #fff;
                font-size: vw(16);
            }

            .el-tabs__item {
                height: vh(30);
                min-width: vw(170);
                color: #fff;
                line-height: vh(30);
                font-size: vw(16);
                text-align: center;
            }

            .el-tabs__item.is-active {
            }

            .el-tabs__active-bar {
                width: vw(144) !important;
                background-color: #26cffe;
            }

            &::after {
                visibility: hidden;
                // background-color: none;
            }
        }
    }
}

.InfoBoxContent .el-descriptions__body {
    background: transparent;
}

.InfoBoxContent .el-descriptions__label.is-bordered-label {
    background: transparent;
}

.InfoBoxContent .el-descriptions__body table {
    margin-top: 20px;
}

.buildingInfo .el-table .cell {
    color: #fff;
}

.buildingInfo .el-table th, .buildingInfo .el-table tr {
    background: #000;
}

/* #00F4FD */
.buildingInfo .el-table td, .buildingInfo .el-table th.is-leaf {
    border-color: #71adaf;
}

.buildingInfo .el-table--enable-row-hover .el-table__body tr:hover > td {
    background: rgb(56, 54, 54);
}

.buildingInfo .el-table--border {
    border-color: #71adaf;
}

.buildingInfo .el-table--border::after, .buildingInfo .el-table--group::after, .buildingInfo .el-table::before {
    background: #71adaf;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .InfoBoxContent {
        position: fixed;
        z-index: 2020;

        // visibility: hidden;
        .infoBox-class-1 {
            width: vw(700);
            position: fixed;
            color: #fff;
            background: rgba(0, 13, 22, 0.8);
            border: 1px solid rgba(127, 255, 255, 0.25);

            .close {
                position: absolute;
                top: 0px;
                right: 10px;
                font-size: vw(20);
                line-height: vh(50);
                cursor: pointer;
            }

            .title {
                text-align: center;
                font-size: vw(18);
                padding-bottom: vh(15);
            }

            .info-box-header {
                padding: 10px 20px;
                background-color: #01C7FF;
                line-height: 24px;
                height: 50px;
                font-size: 18px;
                display: flex;

                .info-box-header-title {
                }
            }

            .PoiInfoBox {
                overflow: auto;
                padding: 10px;
                .resource-form-table-box {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    font-size: 14px;
                    width: 100%;
                    height: vh(280);
                    margin-bottom: vh(20);
                    overflow-y:scroll;
                    .item-box {
                        width: 50%;
                        margin-top: 5px;
                        line-height: vh(25);
                        .label-box {
                            text-align: right;
                            color: #9fabb9;
                            font-weight: 600;
                            padding-right: 5px;
                        }
                        .value-box {
                            padding-left: 5px;
                            // align-self:center;
                        }
                    }
                }

                .PoiInfoItem {
                    // width:140px;
                    width: 100%;
                    // height:vh1(120);
                    // float:left;
                    text-align: left;
                    margin-bottom: vh(5);

                    p {
                        min-height: vh(30);
                        line-height: vh(30);
                        color: #afffff;
                        font-size: vw(16);

                        // text-align:justify;
                        // text-justify:distribute-all-lines;
                        // text-align-last:justify;
                        p {
                            width: 100%;
                            // overflow: hidden;
                            // white-space: nowrap;
                            // text-overflow: ellipsis;
                        }
                    }

                    div {
                        // width:140px;
                        width: 100%;
                        min-height: vh(30);
                        line-height: vh(30);
                        font-size: vw(16);
                        // text-indent: vw(40);
                        color: #fff;
                        background: rgba(19, 62, 76, 0.5);
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        // white-space: nowrap;
                    }
                }

                .PoiInfoItem:nth-of-type(even) {
                    // float: right;
                }
            }
        }

        #infoBox1 {
            display: none;
        }

        #infoBox0 {
            display: none;
        }

        #infoBox2 {
            display: none;
        }

        #infoBox4 {
            display: none;
        }

        #infoBox3 {
            display: none;

            .exportEvent {
                display: flex;

                div {
                    height: vh(30);
                    line-height: vh(30);
                    border: 1px solid #ddd;
                    text-align: center;
                    font-size: vw(15);
                    border-radius: 5px;
                    width: vw(100);
                    margin-right: vw(20);
                }
            }
        }
    }

    .fxfkLeft {
        position: absolute;
        z-index: 3;
        top: vh(105);
        left: vw(10);
        padding-left: vw(5);
        width: vw(420);
        height: vh(965);
        box-sizing: border-box;
        background: url('/images/sjzx/leftPanel.png') no-repeat;
        background-size: 100% 100%;
        padding-left: vw(10);
        padding-right: vw(0);
        padding-top: vh(20);
        display: inline-block;
    }

    .sjzxRight {
        position: absolute;
        z-index: 3;
        top: vh(105);
        right: vw(24);
        padding-left: vw(24);
        width: vw(400);
        height: vh(965);
        box-sizing: border-box;
        background: url('/images/sjzx/leftPanel.png') no-repeat;
        background-size: 100% 100%;
        padding-left: vw(22);
        padding-right: vw(22);
        padding-top: vh(20);
        display: inline-block;
    }

    .buildingInfo {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: vw(1200);
        height: vh(800);
        background: #000;
        z-index: 2021;
        border-raduis: 5px;
        overflow: hidden;
        display: none;

        .buildingInfoTitle {
            width: 100%;
            height: vh(50);
            line-height: vh(50);
            font-size: vw(30);
            text-align: center;
        }

        .tableContainer {
            width: 90%;
            height: vh(720);
            margin: 0 auto;
            overflow-y: scroll;
        }

        .close {
            position: absolute;
            top: 2px;
            right: 2px;
            cursor: pointer;
            z-index: 5;
            color: #fff;
        }
    }

    .sjzxBasicDetail {
        position: absolute;
        z-index: 2;
        top: vh(105);
        left: vw(460);
        width: vw(389);
        height: vh(965);
        box-sizing: border-box;
        background: url('/images/sjzx/leftPanel.png') no-repeat;
        background-size: 100% 100%;
        padding-left: vw(15);
        padding-right: vw(12);
        padding-top: vh(20);
        display: inline-block;
    }

    .sjzxRight {
        rightContent();
    }

    .toLeft {
        width: vw(40);
        height: vh(40);
        background: url('/images/sjzx/rollLeft.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: vw(420);
        top: vh(105);
        cursor: pointer;
        z-index: 3;
        transition: all 0.5s;
    }

    .leftButtonChange {
        left: vw(26);
        transition: all 0.5s;
        background: url('/images/sjzx/rollRight.png') no-repeat;
        background-size: 100% 100%;
    }

    .thematicMapTitle {
        position: absolute;
        left: vw(470);
        top: vh(105);
        cursor: pointer;
        z-index: 2;
        transition: all 0.5s;
        font-family: 'SimSun';
        font-size: vw(25);
        height: vh(40);
        line-height: vh(40);
    }

    .thematicMapTitleChange {
        left: vw(70);
        transition: all 0.5s;
    }

    .toRight {
        width: vw(40);
        height: vh(40);
        background: url('/images/sjzx/rollRight.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: vw(400);
        z-index: 2;
        top: vh(85);
        cursor: pointer;
        transition: all 0.5s;
        display: inline-block;
    }

    .rightButtonChange {
        right: vw(26);
        transition: all 0.5s;
        background: url('/images/sjzx/rollLeft.png') no-repeat;
        background-size: 100% 100%;
    }
}

@media (min-width: 3000px) {
    .InfoBoxContent {
        position: fixed;

        // visibility: hidden;
        .infoBox-class-1 {
            width: vw1(900);
            padding: vw1(10);
            position: fixed;
            color: #fff;
            background: rgba(0, 13, 22, 0.8);
            border: 1px solid rgba(127, 255, 255, 0.25);

            .close {
                position: absolute;
                top: 2px;
                right: 2px;
                font-size: vw1(16);
                cursor: pointer;
            }

            .title {
                text-align: center;
                font-size: vw1(25);
                padding-bottom: vh(15);
            }

            .PoiInfoBox {
                height: vh(350);
                overflow: auto;
                padding: 10px;
                .PoiInfoItem {
                    // width:140px;
                    width: 100%;
                    // height:vh1(120);
                    // float:left;
                    text-align: left;
                    margin-bottom: vh(5);

                    p {
                        min-height: vh(35);
                        line-height: vh(35);
                        color: #afffff;
                        font-size: vw1(25);

                        // text-align:justify;
                        // text-justify:distribute-all-lines;
                        // text-align-last:justify;
                        p {
                            width: 100%;
                            // overflow: hidden;
                            // white-space: nowrap;
                            // text-overflow: ellipsis;
                        }
                    }

                    div {
                        // width:140px;
                        width: 100%;
                        min-height: vh(35);
                        line-height: vh(35);
                        font-size: vw1(25);
                        // text-indent: vw(40);
                        color: #fff;
                        background: rgba(19, 62, 76, 0.5);
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                        // white-space: nowrap;
                    }
                }

                .PoiInfoItem:nth-of-type(even) {
                    // float: right;
                }
            }
        }

        #infoBox1 {
            display: none;
        }

        #infoBox2 {
            display: none;
        }

        #infoBox4 {
            display: none;
        }

        #infoBox5 {
            display: none;
        }
        #infoBox8 {
            display: none;
        }

        #infoBox3 {
            display: none;

            .exportEvent {
                display: flex;

                div {
                    height: vh(30);
                    line-height: vh(30);
                    border: 1px solid #ddd;
                    text-align: center;
                    font-size: vw(15);
                    border-radius: 5px;
                    width: vw1(100);
                    margin-right: vw(20);
                }
            }
        }
    }

    .sjzxLeft {
        position: absolute;
        z-index: 3;
        top: vh(105);
        left: vw1(24);
        padding-left: vw1(24);
        height: vh(965);
        box-sizing: border-box;
        // background: url('/images/sjzx/leftPanel.png') no-repeat;
        // background-size: 100% 100%;
        // padding-left: vw(22);
        // padding-right: vw(22);
        // padding-top: vh(20);
        display: inline-block;
    }

    .sjzxRight {
        position: absolute;
        z-index: 3;
        top: vh(105);
        right: vw1(24);
        padding-left: vw1(24);
        height: vh(965);
        box-sizing: border-box;
        // background: url('/images/sjzx/leftPanel.png') no-repeat;
        // background-size: 100% 100%;
        // padding-left: vw(22);
        // padding-right: vw(22);
        // padding-top: vh(20);
        display: inline-block;
    }

    .sjzxBasicDetail {
        position: absolute;
        z-index: 2;
        top: vh(105);
        left: vw1(460);
        width: vw1(389);
        height: vh(965);
        box-sizing: border-box;
        background: url('/images/sjzx/leftPanel.png') no-repeat;
        background-size: 100% 100%;
        padding-left: vw1(15);
        padding-right: vw1(12);
        padding-top: vh(20);
        display: inline-block;
    }

    .sjzxRight {
        rightContent();
    }

    .toLeft {
        width: vw(40);
        height: vh(40);
        background: url('/images/sjzx/rollLeft.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: vw(420);
        top: vh(105);
        cursor: pointer;
        z-index: 3;
        transition: all 0.5s;
    }

    .leftButtonChange {
        left: vw(26);
        transition: all 0.5s;
        background: url('/images/sjzx/rollRight.png') no-repeat;
        background-size: 100% 100%;
    }

    .thematicMapTitle {
        position: absolute;
        left: vw(470);
        top: vh(105);
        cursor: pointer;
        z-index: 2;
        transition: all 0.5s;
        font-family: 'SimSun';
        font-size: vw(25);
        height: vh(40);
        line-height: vh(40);
    }

    .thematicMapTitleChange {
        left: vw(70);
        transition: all 0.5s;
    }

    .toRight {
        width: vw(40);
        height: vh(40);
        background: url('/images/sjzx/rollRight.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: vw(400);
        z-index: 2;
        top: vh(85);
        cursor: pointer;
        transition: all 0.5s;
        display: inline-block;
    }

    .rightButtonChange {
        right: vw(26);
        transition: all 0.5s;
        background: url('/images/sjzx/rollLeft.png') no-repeat;
        background-size: 100% 100%;
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .sjzxLeft {
        leftContent3840();
        width: vw(442);
        padding-left: 0;
        padding-right: 0;
    }

    .sjzxRight {
        rightContent3840();
        width: vw(442);
        padding-left: 0;
        padding-right: 0;
    }
}
</style>
